<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>分组柱状图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<h1 align="center">话题榜内容分析</h1>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script>
  var data = [{'name': '厨房的诱惑', 'type': '讨论', 'value': 3291.3000},
         {'name': '厨房的诱惑', 'type': '阅读', 'value': 3087000.0000},
         {'name': '创造营2019', 'type': '讨论', 'value': 5361.5000},
         {'name': '创造营2019', 'type': '阅读', 'value': 810000.0000},
         {'name': '运动先锋计划', 'type': '讨论', 'value': 639.6000},
         {'name': '运动先锋计划', 'type': '阅读', 'value': 699000.0000},
         {'name': '绿植领养', 'type': '讨论', 'value': 5438.4000},
         {'name': '绿植领养', 'type': '阅读', 'value': 657000.0000},
         {'name': '权力的游戏', 'type': '讨论', 'value': 505.8000},
         {'name': '权力的游戏', 'type': '阅读', 'value': 648000.0000},
         {'name': '歌手鹿晗', 'type': '讨论', 'value': 2794.8000},
         {'name': '歌手鹿晗', 'type': '阅读', 'value': 543000.0000},
         {'name': '朱一龙2019相伴相守', 'type': '讨论', 'value': 1212.6000},
         {'name': '朱一龙2019相伴相守', 'type': '阅读', 'value': 513000.0000},
         {'name': '森林驿站', 'type': '讨论', 'value': 2536.5000},
         {'name': '森林驿站', 'type': '阅读', 'value': 408000.0000},
         {'name': '我的真朋友', 'type': '讨论', 'value': 1836.0000},
         {'name': '我的真朋友', 'type': '阅读', 'value': 152999.9999},
         {'name': '舞出我的样', 'type': '讨论', 'value': 144.0000},
         {'name': '舞出我的样', 'type': '阅读', 'value': 135000.0000},
         {'name': '宇航员DNA发生永久突变', 'type': '讨论', 'value': 10.5000},
         {'name': '宇航员DNA发生永久突变', 'type': '阅读', 'value': 135000.0000},
         {'name': '易烊千玺的惊喜假期', 'type': '讨论', 'value': 243.3000},
         {'name': '易烊千玺的惊喜假期', 'type': '阅读', 'value': 129000.0000},
         {'name': '李小璐删掉与贾乃亮结婚背景照', 'type': '讨论', 'value': 12.9000},
         {'name': '李小璐删掉与贾乃亮结婚背景照', 'type': '阅读', 'value': 122999.9999},
         {'name': '复仇者联盟4:终局之战', 'type': '讨论', 'value': 86.6000},
         {'name': '复仇者联盟4:终局之战', 'type': '阅读', 'value': 117000.0000},
         {'name': '奔驰车主收到恐吓信息', 'type': '讨论', 'value': 16.2000},
         {'name': '奔驰车主收到恐吓信息', 'type': '阅读', 'value': 111000.0000},
         {'name': '网剧致我们暖暖的小时光', 'type': '讨论', 'value': 111.9000},
         {'name': '网剧致我们暖暖的小时光', 'type': '阅读', 'value': 111000.0000},
         {'name': '东宫下架', 'type': '讨论', 'value': 18.6000},
         {'name': '东宫下架', 'type': '阅读', 'value': 102000.0000},
         {'name': '单眼皮但颜值高的人', 'type': '讨论', 'value': 18.3000},
         {'name': '单眼皮但颜值高的人', 'type': '阅读', 'value': 81000.0000},
         {'name': '王思聪情头', 'type': '讨论', 'value': 9.0000},
         {'name': '王思聪情头', 'type': '阅读', 'value': 81000.0000},
         {'name': '电视剧掮客', 'type': '讨论', 'value': 991.3000},
         {'name': '电视剧掮客', 'type': '阅读', 'value': 72000.0000},
         {'name': '奔驰漏油车已库存十个月', 'type': '讨论', 'value': 8.7000},
         {'name': '奔驰漏油车已库存十个月', 'type': '阅读', 'value': 68999.9999},
         {'name': '权力的游戏第八季', 'type': '讨论', 'value': 35.7000},
         {'name': '权力的游戏第八季', 'type': '阅读', 'value': 68999.9999},
         {'name': '独角兽冰淇淋', 'type': '讨论', 'value': 7.2000},
         {'name': '独角兽冰淇淋', 'type': '阅读', 'value': 60000.0000},
         {'name': '杨紫工作室呼吁理智追星', 'type': '讨论', 'value': 9.9000},
         {'name': '杨紫工作室呼吁理智追星', 'type': '阅读', 'value': 60000.0000},
         {'name': '王思聪吃玉米头像', 'type': '讨论', 'value': 5.4000},
         {'name': '王思聪吃玉米头像', 'type': '阅读', 'value': 54000.0000},
         {'name': '朱莉皮特正式结束婚姻关系', 'type': '讨论', 'value': 4.2000},
         {'name': '朱莉皮特正式结束婚姻关系', 'type': '阅读', 'value': 51000.0000}];
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight-100
  });
  chart.source(data);
  chart.interval().position('name*value').color('type').adjust([{
    type: 'dodge',
    marginRatio: 1 / 32
}]);
  chart.render();
</script>
</body>
</html>

